<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <blog :title="msg" 
             :pnum="pnum" 
             :pbool="pbool"
             :parr="parr"
             :pobj="pobj"></blog>
    </div>
</body>
<script>
Vue.component('blog',{
    props:['title','pnum','pbool','parr','pobj'],
    data: function(){
        return {

        }
    },
    template: `
    <div>
        <h1>博客组件 {{title}}</h1>
        <h1>年龄 {{pnum}}</h1>
        <h1>男女 {{pbool}}</h1>
        <p v-for='item in parr'> {{item}}</p>
        <h1>{{pobj.stname}}</h1>
    </div>
    `
})

var vm = new Vue({
    el: "#app",
    data: {
       msg:'明天下雨',
       info:'看了三本书',
       pnum :18,
       pbool: true,
       parr: ['苹果','香蕉','橘子'],
       pobj:{
           stname:'temo',
           age: 30
       }
    }
});

</script>
</html>